<template>
    <div>
        <van-nav-bar title="个人中心" />
        <div class="box1">
            <P>
                <van-image round width="10rem" height="10rem"
                    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                    style="width: 45px; height: 45px; margin-top: 20px; margin-left: 10px;" />  TOdheQWB
            </P>

            <span>全部订单</span>
            <span>待支付</span>
            <span>待收货</span>
            <span>待评价</span>
            <span>订单</span>
          
        </div>
        <div class="box2">
           <P>剑荡四方是打飞机的士费</P>
           <P>剑荡四方是打飞机的士费</P>
           <P>剑荡四方是打飞机的士费</P>
           <P>剑荡四方是打飞机的士费</P>
        </div>

         <div class="box2">
           <P>剑荡四方是打飞机的士费</P>
           <P>剑荡四方是打飞机的士费</P>
           <P>剑荡四方是打飞机的士费</P>
           <P>剑荡四方是打飞机的士费</P>
        </div>
         <div class="box2">
           <P>剑荡四方是打飞机的士费</P>
           <P>剑荡四方是打飞机的士费</P>
           <P>剑荡四方是打飞机的士费</P>
           <P>剑荡四方是打飞机的士费</P>
        </div>
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.box1 {
    width: 350px;
    height: 150px;
    background-color: antiquewhite;
    margin: 0 auto;
    span{
        float: left;
        border:  1px solid #ccc;
        // width: 20px;
        // height: 30px;
        margin-left: 10px;
    }
}

.box2
{
    width: 350px;
    height: 200px;
    background-color: #ccc;
    margin-top: 10px;
    margin: 0 auto;
   
}
</style>